<template>
    <el-row justify="center" align="bottom">
        <div id="myEChartsBar" style="width: 600px; height:400px;"></div>
        <div id="myEChartsLine" style="width: 600px; height:400px;"></div>
    </el-row>
</template>
<script lang="ts">
export default {
    data() {
        return {

        }
    },
    methods: {
        // 基本柱形图
        changeBar() {
            const myEChart = this.$echarts.init(document.getElementById("myEChartsBar"));
            const option = {
                title: {
                    text: '当日来单量与完成量',
                    x: 'center'
                },
                legend: {
                    // Try 'horizontal'
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    data: ['来单量', '完成量']
                },
                xAxis: {
                    data: ['02.25', '02.26', '02.27', '02.28', '03.01']
                },
                yAxis: {},
                series: [
                    {
                        type: 'bar',
                        data: [23, 24, 18, 25, 18],
                        barGap: '20%',
                        barCategoryGap: '40%'
                    },
                    {
                        type: 'bar',
                        data: [12, 14, 9, 9, 11]
                    }
                ]
            };
            myEChart.setOption(option);
            // 根据页面大小自动响应图表大小
            window.addEventListener("resize", function () {
                myEChart.resize();
            });
        },
        // 折线图
        changeLine() {
            // 获取组件实例
            const myEChart = this.$echarts.init(document.getElementById("myEChartsLine"));
            // 设置配置项
            const option = {
                title: {
                    text: '当日与昨日来单量与完成订单量',
                    x: 'center'
                },
                xAxis: {
                    data: ['02.25', '02.26', '02.27', '02.28', '03.01'],
                },
                yAxis: {},
                series: [
                    {
                        data: [10, 22, 28, 43, 49],
                        type: "line",
                        stack: "x",
                    },
                    {
                        data: [5, 4, 3, 5, 10],
                        type: "line",
                        stack: "x",
                    },
                ],
            };
            // 复制s
            myEChart.setOption(option);
            // 根据页面大小自动响应图表大小
            window.addEventListener("resize", function () {
                myEChart.resize();
            });
        },
    },

    mounted() {
        this.changeBar();
        this.changeLine();
    },

}

</script>

<style scoped>
#myEChartsBar {
    min-width: 31.25rem;
    min-height: 31.25rem;
    /*max-height: 500px;*/
}

#myEChartsLine {
    max-height: 500px;
    /*max-height: 400px;*/
    height: 500px;
}
</style>